PGliteとClaude APIをつかってクライアントだけでRAGする

anthropic-dangerous-direct-browser-access: true`

import { PGlite } from "@electric-sql/pglite";
import { vector } from "@electric-sql/pglite/vector";

const db = await PGlite.create({ extensions: { vector } });

# gh
% gh repo clone https://github.com/nakamura-shuta/pglite-react-app
% cd pglite-react-app
% npm i

# pglite.wasmをコピー
% mkdir -p public/@electric-sql/pglite/dist/
% cp ../node_modules/@electric-sql/pglite/dist/postgres.wasm public/@electric-sql/pglite/dist/

# Build & Run
% npm run build
% npm run dev

//src/service/databaseOperation.js
export const insertCompanyHistory = async (db, history) => {
  await db.exec('DELETE FROM company_history');
  console.log('Existing data deleted');

  for (const item of history) {
    const embedding = getEmbedding(`${item.year}年: ${item.event}`);
    await db.query('INSERT INTO company_history (year, event, embedding) VALUES ($1, $2, $3)', 
                   [item.year, item.event, JSON.stringify(embedding)]);
    console.log(`Added event for year ${item.year}`);
  }
  console.log('Company history data added successfully');
};

//src/service/databaseOperation.js
export const findRelevantEvents = async (db, query) => {
  const queryEmbedding = getEmbedding(query);
  const result = await db.query('SELECT year, event, embedding FROM company_history');

  return result.rows
    .map(row => ({
      ...row,
      distance: cosineSimilarity(queryEmbedding, JSON.parse(row.embedding))
    }))
    .sort((a, b) => a.distance - b.distance)
    .filter((event, index) => index < 3 || event.distance < 0.8);
};

//src/services/aiOperations.js
export const getAIResponse = async (apiKey, query, eventDataList) => {
    const eventsText = eventDataList
      .map(event => `${event.year}年: ${event.event}`)
      .join('\n');

    const response = await fetch("https://api.anthropic.com/v1/messages", {
      method: "POST",
      headers: {
        "x-api-key": apiKey,
        "anthropic-version": "2023-06-01",
        "content-type": "application/json",
        "anthropic-dangerous-direct-browser-access": "true",
      },
      body: JSON.stringify({
        model: "claude-3-sonnet-20240229",
        max_tokens: 1000,
        messages: [
          {
            role: "user",
            content: [<プロンプト>],
          },
        ],
      }),
    });

    const data = await response.json();
    console.log('AI response generated successfully');
    return data.content[0].text;
  };

% npm run dev

> pglite-react-app@0.0.0 dev
> vite

  VITE v5.4.2  ready in 672 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help